<template>
  <div class="jjhjjhweerw" :class="className">
    <div class="kkwerrwe" v-for="(item, idx) in dataList" :key="idx">
      <div class="mediaresource">
        <img :src="item.fm" class="w100 h100 fehkjnerrw" />
        <div class="caozuoeerrw vertical-center cf">
          <div class="cf w100 pd cen display-flex dsfsdrerer">
            <div
              class="flex-1"
              v-if="idx != 0"
              @click="huanweiz(item.paixu, dataList[idx - 1].paixu)"
            >
              <i class="iconfont dx-houtui fz40 sz"></i>
            </div>
            <div class="flex-1">
              <i
                class="iconfont dx-wenbenbianji fz40 sz"
                @click="showpupbj(item)"
              ></i>
            </div>
            <div class="flex-1">
              <i
                class="iconfont dx-shanchu fz40 sz"
                @click="delesc(item.id)"
              ></i>
            </div>
            <div
              class="flex-1"
              v-if="idx != dataList.length - 1"
              @click="huanweiz(item.paixu, dataList[idx + 1].paixu)"
            >
              <i class="iconfont dx-qianjin fz40 sz"></i>
            </div>
          </div>
        </div>
      </div>
      <p class="fz22 pt10">{{ item.title }}</p>
      <p v-if="showintroduce" class="mt10 fz16">
        {{ item.introduce }}
      </p>
    </div>
    <div class="mediaresource vertical-center fz32 z9 sz" @click="showpup">
      +点击添加{{ puptitle }}
    </div>

    <n-modal v-model:show="showModal" preset="card" class="Stock-diagnosis">
      <template #header>
        <div>{{ Editnot ? "编辑" : "添加" }}{{ puptitle }}</div>
      </template>
      <div>
        <n-form
          ref="formRef"
          size="medium"
          label-placement="left"
          :label-width="70"
          :model="formdata"
          :rules="rules"
        >
          <n-form-item label="封面" path="fm">
            <div
              class="headPortrait-box vertical-center sz dsfsdrerw"
              @click="photoShowModaler = true"
            >
              <img :src="formdata.fm" v-if="formdata.fm" />
              <i class="iconfont dx-tupian fz30" v-else> </i>
            </div>
          </n-form-item>
          <n-form-item label="标题" path="title" v-if="!hideTitle">
            <n-input placeholder="请输入标题" v-model:value="formdata.title" />
          </n-form-item>
          <n-form-item label="简介" path="introduce" v-if="showintroduce">
            <n-input
              placeholder="请输入简介"
              v-model:value="formdata.introduce"
            />
          </n-form-item>

          <n-form-item label="跳转链接" path="url" v-if="!hideUrl">
            <div class="display-flex">
              <div class="flex-1">
                <n-input
                  placeholder="请输入跳转链接"
                  v-model:value="formdata.url"
                />
              </div>
              <div class="ml10">
                <n-button
                  type="primary"
                  size="medium"
                  @click="photoShowModal = true"
                  >选择视频</n-button
                >
              </div>
            </div>
          </n-form-item>
        </n-form>
      </div>
      <template #action>
        <div class="tr">
          <n-button @click="showModal = false"> 取消 </n-button>

          <n-button type="primary" @click="tijiaofrom" class="ml20"
            >确认</n-button
          >
        </div>
      </template>
    </n-modal>

    <n-modal
      v-model:show="photoShowModal"
      preset="card"
      class="Stock-diagnosis"
    >
      <template #header>
        <div>{{ puptitle }}</div>
      </template>
      <div>
        <photoGallery
          @getImg="getImg"
          types="abb{{puptitle}}"
          accept=".mp4"
        ></photoGallery>
      </div>
      <template #action>
        <div class="tr">
          <n-button @click="photoShowModal = false"> 取消 </n-button>
          <n-button class="ml10" type="info" @click="geturl"> 确定 </n-button>
        </div>
      </template>
    </n-modal>

    <n-modal
      v-model:show="photoShowModaler"
      preset="card"
      class="Stock-diagnosis"
    >
      <template #header>
        <div>上传/选择封面</div>
      </template>
      <div>
        <photoGallery @getImg="getImger" types="abb封面"></photoGallery>
      </div>
      <template #action>
        <div class="tr">
          <n-button @click="photoShowModaler = false"> 取消 </n-button>
          <n-button class="ml10" type="info" @click="geturler"> 确定 </n-button>
        </div>
      </template>
    </n-modal>
  </div>
</template>
 <script lang='ts' setup>
import { dxpost, dxget, dialog, dxdel } from "../../../../util";
import { ref } from "vue";
import photoGallery from "../../../../components/util/photoGallery";
const props = defineProps({
  puptitle: { type: String },
  type: { type: String },
  className: { type: String },
  hideTitle: { type: Boolean, default: false }, // 是否隐藏标题输入框
  hideUrl: { type: Boolean, default: false }, // 是否隐藏跳转地址输入框
  showintroduce: { type: Boolean, default: false }, // 是否显示简介
});
const showModal = ref(false);
const photoShowModal = ref(false);
const photoShowModaler = ref(false);
let videUrl = "",
  videUrler = "";
const formRef = ref(null);
const formdata = ref({
  fm: "",
  title: "",
  url: "",
  id: "",
  introduce: "",
});
const rules = {
  fm: [
    {
      required: true,
      message: "请上传封面！",
    },
  ],
  title: [
    {
      required: true,
      message: "请输入标题",
    },
  ],
  introduce: [
    {
      required: true,
      message: "请输入简介",
    },
  ],

  url: [
    {
      required: true,
      message: "请输入跳转链接",
    },
  ],
};
const getImg = (data) => {
  videUrl = data;
};
const getImger = (data) => {
  videUrler = data;
};
const geturl = () => {
  formdata.value.url = videUrl;
  photoShowModal.value = false;
};
const geturler = () => {
  formdata.value.fm = videUrler;
  photoShowModaler.value = false;
};
const tijiaofrom = async () => {
  formRef.value?.validate(async (errors) => {
    let format = 1;
    if (formdata.value.url.indexOf(".mp4") > 0) {
      format = 2;
    }
    if (!errors) {
      const obj = {
        ...formdata.value,
        type: props.type,
        format,
      };
      let lexye = "post";
      if (formdata.value.id) {
        lexye = "put";
      }

      const { errno }: any = await dxpost("abb/abbskip", obj, lexye);
      if (errno == 0) {
        window.$message.success("提交成功！");
        showModal.value = false;
        initDta();
      }
    } else {
      console.log(errors);
    }
  });
};

const Editnot = ref(false); // true 为编辑的状态
const pupskip = ref();
const dataList = ref([]);
// 新增
const showpup = () => {
  Editnot.value = false;
  showModal.value = true;
  incs();
};
// 编辑
const showpupbj = (data) => {
  Editnot.value = true;
  showModal.value = true;
  incs(data);
};
// 删除
const delesc = async (id) => {
  let statics: any = await dialog("此操作将永久删除, 是否继续?");
  if (statics == 1) {
    let { errno }: any = await dxdel("abb/abbskip", {
      id,
    });
    if (errno == 0) {
      window.$message.success("删除成功！");
      initDta();
    }
  }
};
// 换位置   paixu：当前排序的值  type：1前进一位 2后退一位
const huanweiz = async (paixu, next) => {
  const res = await dxget("abb/paixu", {
    paixu,
    next,
  });
  console.log(res);
  initDta();
};

const initDta = async () => {
  const { data }: any = await dxget("abb/abbskip", { type: props.type });
  dataList.value = data;
};
initDta();

const incs = (data?) => {
  if (data) {
    formdata.value = JSON.parse(JSON.stringify(data));
  } else {
    formdata.value = { fm: "", title: "", url: "", id: "" };
  }
};
</script>
 <style scoped>
</style>